import React, { Component } from 'react';
import { connect } from 'react-redux';
import { BarChart } from '../../charts/charts';
import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
import { Progress } from 'antd';

// 进度报表
const SortableItem = SortableElement(({ value }) => <div className="col-xs-12 col-md-6"><Dashboard data={value} /></div>);

const SortableList = SortableContainer(({ items }) => {
    return (
        <div>
            {
                items.map((item, index) => {
                    return item && item.index == 0 ? <BarGraphItem key={`item-${index}`} index={index} value={item || { name: '', data: [] }} />
                        : item && item.index == 1 ? <PieGraphItem key={`item-${index}`} index={index} value={item || { name: '', data: [] }} />
                            : item && item.index == 2 ? <LineGraphItem key={`item-${index}`} index={index} value={item || { name: '', data: [] }} />
                                : <SortableItem key={`item-${index}`} index={index} value={item || { name: '', data: [] }} />
                })
            }
            <div className="col-xs-12 col-md-6">
                <div className="box box-solid add-dashboard">
                    <div className="box-body"></div>
                </div>
            </div>
        </div>
    );
});

/**
 * 任务报表
 */
class TaskDashboard extends Component {
    onSortEnd({ oldIndex, newIndex }) {
        let items = arrayMove(this.props.items, oldIndex, newIndex);
        this.props.sortItems(items);
    }
    render() {
        const { items } = this.props;
        return <SortableList axis="xy" items={items} onSortEnd={this.onSortEnd.bind(this)} useDragHandle={true} />
    }
}

const _TaskDashboard = connect(
    state => {
        return {
            items: state.taskItems,

        }
    },
    dispatch => {
        return {
            sortItems: (items) => {
                dispatch({
                    type: 'sort-task-items',
                    val: items
                });
            }
        }
    }

)(TaskDashboard);


/**
 * 销售任务进度报表图组件
 */
class Dashboard extends Component {

    render() {
        var { data } = this.props;
        return (
            <div className="box box-solid" style={{ height: 460 }}>
                <div className="box-header with-border" style={{ margin: 0, fontSize: 20 }}>
                    <h3 style={{ margin: 0, fontSize: 16 }}>{data.name}</h3>
                </div>
                <div className="box-body">
                    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', alignItems: 'center', marginTop: 30 }}>
                        <Progress type="dashboard" percent={75} strokeWidth={10} />
                        <span>总任务完成率</span>
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', marginTop: 100 }}>
                        <Progress type="circle" percent={55} width={80} />
                        <span>平均任务进度</span>
                        <Progress type="circle" percent={62} width={80} />
                        <span>任务完成率</span>
                    </div>

                </div>
            </div>
        );
    }
}


export default _TaskDashboard;